<template>
	<div id="netfollow">
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/welcome' }">网络档案管理系统</el-breadcrumb-item>
			<el-breadcrumb-item>网络跟踪</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row>
				<el-col style="margin-bottom: 30px;">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item label="姓名">
							<el-input v-model="formInline.StudentName"></el-input>
						</el-form-item>
						<el-form-item label="跟踪者">
							<el-select v-model="formInline.UserId">
								<el-option v-for="item in aslist" :label="item.LoginName" :value="item.Id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="跟踪方式" prop="FollowType" label-width="80px">
							<el-select v-model="formInline.FollowType">
								<el-option label="--面谈--" value="面谈"></el-option>
								<el-option label="--电话--" value="电话"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="回访情况" prop="FollowState" label-width="80px">
							<el-select v-model="formInline.FollowState">
								<el-option label="--思量--" value="思量"></el-option>
								<el-option label="--上门未报名--" value="上门未报名"></el-option>
								<el-option label="--报名未选班--" value="报名未选班"></el-option>
								<el-option label="--未上门--" value="未上门"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="创建时间">
							<el-input type="date" v-model="formInline.CreateTime1"></el-input>
						</el-form-item>
						<el-form-item label="结束时间">
							<el-input type="date" v-model="formInline.CreateTime2"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i></el-button>
							<el-button type="success" @click="AddFollow"><i class="el-icon-plus"></i></el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-table :data="tableData" style="width: 100%" max-height="500">
				<el-table-column fixed prop="NId" label="编号">
				</el-table-column>
				<el-table-column prop="StudentName" label="姓名">
				</el-table-column>
				<el-table-column prop="FollowTime" label="跟踪时间">
				</el-table-column>
				<el-table-column prop="FollowState" label="回访情况">
				</el-table-column>
				<el-table-column prop="NextFollowTime" label="下次跟踪时间">
				</el-table-column>
				<el-table-column prop="FollowType" label="跟踪类型">
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button icon="el-icon-thumb" @click.native.prevent="Look(scope.row)" type="text"
							size="small">
							查看
						</el-button>
						<el-button icon="el-icon-notebook-1" @click.native.prevent="deleteRow(scope.row.StudentId)"
							type="text" size="small">
							日志
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				background :page-sizes="[5, 10, 15, 20]" :page-size="limit"
				layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
			<!-- 跟踪 -->
			<el-dialog title="跟踪" :visible.sync="followdialogFormVisible" @close="AFClose">
				<el-form :model="addformFo" ref="addFoFormRef">
					<el-form-item label="编号" prop="StudentId" label-width="80px">
						<el-select v-model="addformFo.StudentId">
							<el-option v-for="item in silist" :label="item.SName" :value="item.SId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="跟踪者" prop="UserId" label-width="80px">
						<el-select v-model="addformFo.UserId">
							<el-option v-for="item in aslist" :label="item.LoginName" :value="item.Id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="跟踪内容" prop="NContent" label-width="80px">
						<el-input v-model="addformFo.NContent"></el-input>
					</el-form-item>
					<el-form-item label="跟踪方式" prop="FollowType" label-width="80px">
						<el-select v-model="addformFo.FollowType">
							<el-option label="--面谈--" value="面谈"></el-option>
							<el-option label="--电话--" value="电话"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="回访情况" prop="FollowState" label-width="80px">
						<el-select v-model="addformFo.FollowState">
							<el-option label="--思量--" value="思量"></el-option>
							<el-option label="--上门未报名--" value="上门未报名"></el-option>
							<el-option label="--报名未选班--" value="报名未选班"></el-option>
							<el-option label="--未上门--" value="未上门"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="次访时间" prop="NextFollowTime" label-width="80px">
						<el-input type="date" v-model="addformFo.NextFollowTime"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button v-on:click="followdialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="SureAddFo">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 查看详细信息 -->
			<el-dialog title="查看" :visible.sync="LookdialogFormVisible" width="400px">
				<div style="align-items: center;text-align: center;">
					<el-divider><i class="el-icon-cloudy"></i></el-divider>
					<div>姓名：{{looklist.StudentName}}</div></br>
					<div>跟踪类型：{{looklist.FollowType}}</div></br>
					<div>回访情况：{{looklist.FollowState}}</div></br>
					<div>内容：{{looklist.NContent}}</div></br>
					<div>跟踪时间：{{looklist.FollowTime}}</div></br>
					<div>下次跟踪时间：{{looklist.NextFollowTime}}</div>
					<el-divider><i class="el-icon-ship"></i></el-divider>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button v-on:click="LookdialogFormVisible = false">关闭</el-button>
				</div>
			</el-dialog>
			<!-- 日志 -->
			<el-dialog title="日志" :visible.sync="dialogFormVisible">
				<el-table :data="netlist" style="width: 100%" max-height="500">
					<el-table-column fixed prop="SId" label="编号" width="100">
					</el-table-column>
					<el-table-column prop="SName" label="姓名" width="120">
					</el-table-column>
					<el-table-column prop="Sex" label="性别" width="120">
					</el-table-column>
					<el-table-column prop="Age" label="年龄" width="120">
					</el-table-column>
					<el-table-column prop="QQ" label="QQ" width="150">
					</el-table-column>
					<el-table-column prop="WX" label="微信" width="150">
					</el-table-column>
					<el-table-column prop="SAddress" label="地址" width="150">
					</el-table-column>
				</el-table>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" v-on:click="dialogFormVisible = false">关闭</el-button>
				</div>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInline: {
					StudentName: '',
					UserId: '',
					FollowState: '',
					CreateTime1: '',
					CreateTime2: '',
					FollowType: ''
				},
				aslist: [],
				tableData: [],
				page: 1,
				limit: 5,
				count: 0,
				LookdialogFormVisible: false,
				looklist: [],
				netlist: [],
				dialogFormVisible: false,
				followdialogFormVisible: false,
				addformFo: {
					StudentName: '',
					StudentId: '',
					FollowType: '',
					FollowState: '',
					NextFollowTime: '',
					UserId: '',
					NContent: ''
				},
				silist: []
			}
		},
		created() {
			this.GetFolList();
			this.GetAskerList();
			this.GetSIlist();
		},
		methods: {
			//日志
			deleteRow(StudentId) {
				console.log(StudentId);
				let _this = this;
				_this.dialogFormVisible = true;
				this.$axios.post('/api/api/Follow/GetRiZhiList', {
					StudentId: StudentId
				}).then(function(res) {
					console.log(res.data.data);
					_this.netlist = res.data.data;
					_this.count = res.data.count;
				}).catch(function(res) {
					console.log(res);
				});
			},
			onSubmit() {
				this.GetFolList();
			},
			//打开跟踪框
			AddFollow(row) {
				this.followdialogFormVisible = true;
			},
			//关闭弹框后清除信息
			AFClose() {
				this.$refs.addFoFormRef.resetFields();
			},
			GetSIlist() {
				let _this = this;
				this.$axios.get('/api/api/Follow/GetStuNI').then(function(res) {
					_this.silist = res.data.data;
				}).catch(function(res) {
					console.log(res);
				});
			},
			SureAddFo() {
				let _this=this;
				this.$axios.get('/api/api/Follow/getname', {
					params: {
						StudentId: this.addformFo.StudentId,
					}
				}).then(function(res){
					_this.addformFo.StudentName = res.data.data;
					_this.AddDel()
				});
			},
			AddDel() {
				let _this=this;
				this.$axios.post('/api/api/Follow/AddDel', this.addformFo).then(function(res){
					if (res.data.code == 0) {
						_this.$message.success(res.data.msg)
						_this.followdialogFormVisible = false;
						//刷新列表
						this.GetFolList();
					} else {
						_this.$message(res.data.msg);
					}
				})
			},
			//获取学生信息
			GetFolList() {
				let _this = this;
				this.$axios.get('/api/api/Follow/GetFolList', {
					params: {
						page: _this.page,
						limit: _this.limit,
						StudentName: _this.formInline.StudentName,
						UserId: _this.formInline.UserId,
						FollowState: _this.formInline.FollowState,
						CreateTime1: _this.formInline.CreateTime1,
						CreateTime2: _this.formInline.CreateTime2,
						FollowType: _this.formInline.FollowType
					}
				}).then(function(res) {
					console.log(res);
					_this.tableData = res.data.data;
					_this.count = res.data.count;
				}).catch(function(res) {
					console.log(res);
				});
			},
			//获取跟踪者
			GetAskerList() {
				let _this = this;
				this.$axios.get('/api/api/Follow/GetUsList').then(function(res) {
					console.log(res.data.data);
					_this.aslist = res.data.data;
				}).catch(function(res) {
					console.log(res);
				});
			},
			handleSizeChange(newSize) {
				console.log(newSize);
				this.limit = newSize;
				this.GetFolList();
			},
			//监听页码值改变
			handleCurrentChange(newPage) {
				console.log(newPage);
				this.page = newPage;
				this.GetFolList();
			},
			Look(row) {
				this.looklist = row;
				this.LookdialogFormVisible = true;
			}
		}
	}
</script>

<style>
</style>
